<template>
  <PageWrapper>
    <div class="account-info">
      <div class="global-header-title">
        <div class="title-content">账号基本信息</div>
      </div>
      <div class="page-account">
        <div class="account-item">
          <div class="item-content">
            <div class="content-icon">
              <IconFont iconType="icon-xingming_icon" customClass="icon-show" />
            </div>
            <div class="content-show">
              <div class="content-label">用户名</div>
              <div class="content-value">
                {{ userInfo.userAccount }}
              </div>
            </div>
          </div>
          <!-- <div class="global-primary-text" @click="updateInfo('userName')">修改</div> -->
        </div>
        <div class="account-item" v-if="userInfo.phoneNumber">
          <div class="item-content">
            <div class="content-icon">
              <IconFont iconType="icon-shoujihao_icon" customClass="icon-show" />
            </div>
            <div class="content-show">
              <div class="content-label">手机号</div>
              <div class="content-value">已绑定手机：{{ userInfo.phoneNumber }}</div>
            </div>
          </div>
          <div class="global-primary-text" @click="updateInfo('phone')">修改</div>
        </div>
        <div class="account-item" v-else>
          <div class="item-content">
            <div class="content-icon">
              <IconFont iconType="icon-shoujihao_icon" customClass="icon-show" />
            </div>
            <div class="content-show">
              <div class="content-label">手机号</div>
              <div class="content-value">绑定后可使用手机号登录</div>
            </div>
          </div>
          <div class="global-primary-text" @click="updateInfo('bindPhone')">去绑定</div>
        </div>
        <div class="account-item">
          <div class="item-content">
            <div class="content-icon">
              <IconFont iconType="icon-denglumima_icon" customClass="icon-show" />
            </div>
            <div class="content-show">
              <div class="content-label">登录密码</div>
              <div class="content-value">安全性高的密码可以使账号更安全。建议您定期更换密码</div>
            </div>
          </div>
          <div class="global-primary-text" @click="updateInfo('pwd')">修改</div>
        </div>
        <div class="account-item" v-if="userInfo.email">
          <div class="item-content">
            <div class="content-icon">
              <IconFont iconType="icon-youxiang_icon" customClass="icon-show" />
            </div>
            <div class="content-show">
              <div class="content-label">邮箱</div>
              <div class="content-value">已绑定邮箱：{{ userInfo.email }}</div>
            </div>
          </div>
          <div class="global-primary-text" @click="updateInfo('email')">修改</div>
        </div>
        <div class="account-item" v-else>
          <div class="item-content">
            <div class="content-icon">
              <IconFont iconType="icon-youxiang_icon" customClass="icon-show" />
            </div>
            <div class="content-show">
              <div class="content-label">邮箱</div>
              <div class="content-value">绑定后可使用邮箱登录</div>
            </div>
          </div>
          <div class="global-primary-text" @click="updateInfo('bindEmail')">去绑定</div>
        </div>
        <div class="account-item">
          <div class="item-content">
            <div class="content-icon">
              <IconFont iconType="icon-denglumima_icon" customClass="icon-show" />
            </div>
            <div class="content-show">
              <div class="content-label">我的渠道码</div>
              <div class="content-value">{{ userInfo.channelCode || '--' }}</div>
            </div>
          </div>
          <div class="global-primary-text" v-if="userInfo.channelCode" @click="copyTxt">复制</div>
        </div>
      </div>

      <ModifyPwd @register="modifyPwdRegister" />
      <ModifyInfo @register="modifyInfoRegister" @operateSuccess="userModule.getUserInfo" />
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { userStore } from '@/store/modules/user'
import { useModal } from '@/components/Modal'
import { message } from 'ant-design-vue'
import IconFont from '@/components/IconFont/index.vue'
import ModifyPwd from '@/layout/components/LayoutHeader/ModifyPwd.vue'
import ModifyInfo from './components/ModifyInfo.vue'
import useClipboard from 'vue-clipboard3'

const userModule = userStore()

const { toClipboard } = useClipboard()

const [modifyPwdRegister, { openModal: modifyPwdOpenModal }] = useModal()
const [modifyInfoRegister, { openModal: modifyInfoOpenModal }] = useModal()

const userInfo = computed(() => userModule.userInfo)

// 内容复制
const copyTxt = async () => {
  let channelCode = userInfo.value.channelCode || ''
  await toClipboard(channelCode)
  message.success('渠道码复制成功')
}

const updateInfo = (type: string) => {
  if (type === 'pwd') {
    modifyPwdOpenModal()
  } else {
    modifyInfoOpenModal(true, { type, userInfo })
  }
}
</script>

<style lang="less" scoped>
.page-account {
  width: 640px;
  margin: 116px auto 40px;
  padding: 0 24px;
  font-size: 12px;
  .account-item {
    padding-bottom: 22px;
    padding-top: 22px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:first-child {
      border-top: 1px solid #e8e8e8;
    }
    .item-content {
      display: flex;
      align-items: center;
      .content-icon {
        width: 44px;
        height: 44px;
        background: #ebfeec;
        border-radius: 50%;
        margin-right: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon-show {
          font-size: 24px;
          color: @primary-color;
        }
      }
      .content-show {
        padding-left: 24px;
        position: relative;
        &::before {
          content: '';
          width: 1px;
          height: 22px;
          background: #e0e1e6;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        .content-label {
          font-weight: bold;
          margin-bottom: 8px;
        }
        .content-value {
          font-weight: bold;
          color: @text-color-secondary;
        }
      }
    }
  }
}
</style>
